<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>英雄联盟</title>
		<link rel="stylesheet" href="ux_1472801352_544877/iconfont.css" />
		<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
		<style>
			/*header start*/
			
			.ui-header h2 {
				font-size: 20px !important;
			}
			.ui-header > a {
				position: absolute !important;
				top: 15px !important;
			}
			#fenlei {
				margin: 0;
				padding: 0;
			}
			#fenlei li {
				position: relative;
				list-style: none;
				display: block;
				float: left;
				width: calc(100%/2 - 21px);
				height: 26px;
				padding: 10px;
				border-bottom: 1px solid #ddd;
				border-left: 1px solid #ddd;
				background-color: white;
				font-weight: 100 !important;
			}
			#fenlei a {
				color: #aaa;
			}
			#fenlei li p {
				position: absolute;
				top: 0;
				left: 10px;
			}
			#fenlei li span {
				position: absolute;
				bottom: 7px;
				right: 7px;
				display: inline-block;
				width: 0px;
				height: 0px;
				border-bottom: 12px solid #ddd;
				border-left: 12px solid transparent;
			}
			/*header end*/
			/*ui-content start*/
			
			.ui-content,
			.ui-content ul {
				padding: 0;
				margin: 0;
			}
			li {
				list-style: none;
				text-align: center;
			}
			.ui-link {
				display: block;
				width: 64px;
				height: 115px;
				font-weight: 100 !important;
				font-size: 15px !important;
				margin: auto !important;
				padding-top: 10px;
			}
			.maps,
			.goods {
				width: 100%;
				height: 90px;
				position: fixed;
				background-color: rgba(220, 220, 220, 0.9);
			}
			.goods {
				height: 140px;
			}
			.maps a,
			.goods a {
				display: block;
				float: left;
				width: calc(100%/3 - 20px);
				height: 25px;
				border: 1px solid #FFF;
				border-radius: 3px;
				text-align: center;
				color: #aaa;
				background-color: #fff;
				margin-left: 15px !important;
				margin-bottom: 10px !important;
			}
			/*ui-content end*/
		</style>
	</head>

	<body>
		<!--物品资料 弹出下拉框没有进行筛选-->
		<div data-role="page">
			<!--header-->
			<div data-role="header" data-position="fixed">
				<a href="index.html" class="ui-btn ui-icon-carat-l ui-btn-icon-left ui-btn-icon-notext ui-btn-corner-all" data-transition="slide" data-direction="reverse" target="_top"></a>
				<h2>物品资料</h2>
				<form>
					<input id="wupinSearch" data-type="search" placeholder="搜索英雄" />
				</form>
				<ul id="fenlei">
					<li id="map">
						<a>
							<p>全部地图</p><span></span></a>
					</li>
					<li id="goods">
						<a>
							<p>全部物品</p><span></span></a>
					</li>
				</ul>
			</div>
			<!--header end-->

			<!--main content-->
			<div data-role="main" class="ui-content">
				<div class="ui-grid-c">
					<div class="ui-block-a">
						<ul data-filter="true" data-input="#wupinSearch">
							<!--<li>
								<a>
									<img src="http://ossweb-img.qq.com/images/lol/img/item/1001.png" />
									<span>活力夹心饼干</span>
								</a>
							</li>-->
						</ul>
					</div>
					<div class="ui-block-b">
						<ul data-filter="true" data-input="#wupinSearch">
						</ul>
					</div>
					<div class="ui-block-c">
						<ul data-filter="true" data-input="#wupinSearch">
						</ul>
					</div>
					<div class="ui-block-d">
						<ul data-filter="true" data-input="#wupinSearch">
						</ul>
					</div>
				</div>
				<!-- /grid-c -->
			</div>
			<!--main content end-->
			<!--footer-->
		</div>

		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/artTemplate.js"></script>
		<script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>

		<!--弹出地图列表框-->
		<script type="text/javascript">
			var j = 0;
			$("#map").click(function() {
				if (j % 2 == 0) {
					$(this).find("a").css("color", "#dead5f");
					$(this).find("span").css("border-bottom", "12px solid #3386c6");
					$(this).find("span").css("border-left", "12px solid transparent");
					//				console.log("error");
					var $div = $("<div class='maps'><a style='background-color: #dead5f; color: white;'>全部地图</a><a>召唤师峡谷</a><a>嚎哭深渊</a><a>水晶之痕</a><a>扭曲丛林</a></div>");
					//				console.log($div);
					$div.insertBefore($(".ui-grid-c"));
					j++;
				} else {
					$(this).find("a").css("color", "#aaa");
					$(this).find("span").css("border-bottom", "12px solid #ddd");
					$(this).find("span").css("border-left", "12px solid transparent");
					$(".maps").remove();
					j++;
				}
			});
		</script>
		<!--弹出列表框-->

		<!--弹出物品列表框-->
		<script type="text/javascript">
			var i = 0;
			$("#goods").click(function() {
				if (i % 2 == 0) {
					$(this).find("a").css("color", "#dead5f");
					$(this).find("span").css("border-bottom", "12px solid #3386c6");
					$(this).find("span").css("border-left", "12px solid transparent");
					//				console.log("error");
					var $div = $("<div class='goods'><a style='background-color: #dead5f; color: white;'>全部物品</a><a>攻击速度</a><a>对线</a><a>冷却缩减</a><a>工资装</a><a>护甲</a><a>鞋</a></div>");
					//				console.log($div);
					$div.insertBefore($(".ui-grid-c"));
					i++;
				} else {
					$(this).find("a").css("color", "#aaa");
					$(this).find("span").css("border-bottom", "12px solid #ddd");
					$(this).find("span").css("border-left", "12px solid transparent");
					$(".goods").remove();
					i++;
				}
			});
		</script>
		<!--弹出列表框-->

		<!--物品资料-->
		<script type="text/html" id="wupinTemp">
			<li>
				<a class="ui-link">
					<img src="http://ossweb-img.qq.com/images/lol/img/item/{{good_id}}.png" />
					<span>{{name}}</span>
				</a>
			</li>
		</script>
		<script>
			$.ajax({
//				type: "get",
				url: "json/goods.json",
				async: true,
				dataType: "json",
				success: function(data) {
					$.each(data.items, function(i, val) {
						var $li = $(template('wupinTemp', val));
						if (i % 4 == 0) {
							$li.appendTo($(".ui-block-a ul"));
						};
						if (i % 4 == 1) {
							$li.appendTo($(".ui-block-b ul"));
						};
						if (i % 4 == 2) {
							$li.appendTo($(".ui-block-c ul"));
						};
						if (i % 4 == 3) {
							$li.appendTo($(".ui-block-d ul"));
						}
					});
				},
				error: function() {
					alert("服务器错误");
				}
			});
		</script>
		<!--物品资料-->
	</body>

</html>